import React, {Component} from 'react';
import axios from 'axios';
import {Layout, Menu, Breadcrumb} from 'antd';
const {Header, Content, Footer} = Layout;
import MyTable from './Table.jsx'
class App extends Component {
  constructor(props) {
    super(props);
    // 设置 initial state
    this.state = {
      menus: [],
      currentMenu: "Person"
    };
  }
  componentWillMount() {
    var _this = this;
    axios
      .get('/Json/GetObjectName')
      .then(function (response) {
        _this.setState({menus: response.data});
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  menuClick(menu) {
    function Trim(str) {
      return str.replace(/(^\s*)|(\s*$)/g, "");
    }
    this.setState({currentMenu: Trim(menu)});
  }
  render() {
    return (
      <Layout>
        <Header
          style={{
          position: 'fixed',
          width: '100%'
        }}>
          <div className="logo"/>

          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{
            lineHeight: '64px'
          }}>
            {this
              .state
              .menus
              .map(menu => {
                return (
                  <Menu.Item key={menu}>
                    <a
                      onClick={this
                      .menuClick
                      .bind(this, menu)}>{menu}</a>
                  </Menu.Item>
                )
              })}
          </Menu>
        </Header>
        <Content
          style={{
          padding: '0 50px',
          marginTop: 64
        }}>
          <Breadcrumb style={{
            margin: '12px 0'
          }}>
            <Breadcrumb.Item>Stage</Breadcrumb.Item>
            <Breadcrumb.Item>对象</Breadcrumb.Item>
            <Breadcrumb.Item>操作</Breadcrumb.Item>
          </Breadcrumb>
          <div
            style={{
            background: '#fff',
            padding: 24,
            minHeight: '100%'
          }}>
            <MyTable name={this.state.currentMenu}/></div>
        </Content>
        <Footer style={{
          textAlign: 'center'
        }}>
          power by stage
        </Footer>
      </Layout>
    );
  }
}

export default App;
